<template>
  <TemplateTitle
    titleName="全年完成情况"
    style="margin-bottom: 25rem"
  ></TemplateTitle>
  <div class="rateList" style="margin-bottom: 20rem">
    <div class="rateItem">
      <chart-rate :rate="dataObj.scaleOfYearDays"></chart-rate>
      <div class="rateDetail">
        <p>运行时间</p>
        <div class="numb">
          <span class="count">{{ dataObj.runDays }}</span
          >天
        </div>
      </div>
    </div>
    <div class="rateItem">
      <chart-rate :rate="dataObj.scaleOfYear"></chart-rate>
      <div class="rateDetail">
        <p>水量</p>
        <div class="numb">
          <span class="count">{{ dataObj.completeOfYear }}</span
          >万吨
        </div>
      </div>
    </div>
    <div class="rateItem">
      <chart-rate :rate="dataObj.scaleOfCod"></chart-rate>
      <div class="rateDetail">
        <p>COD削减量</p>
        <div class="numb">
          <span class="count">{{ dataObj.actualCodOfYear }}</span
          >吨
        </div>
      </div>
    </div>
    <div class="rateItem">
      <chart-rate :rate="dataObj.scaleOfAn"></chart-rate>
      <div class="rateDetail">
        <p>氨氮削减量</p>
        <div class="numb">
          <span class="count">{{ dataObj.actualAnOfYear }}</span
          ><span>吨</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue";
import homeHttp from "@/https/home.js";
import { onMounted, ref } from "vue";
import ChartRate from "./charts/ChartRate.vue";

const rate = ref(10);
let dataObj = ref({});

onMounted(() => {
  queryAchievedOfYear();
});

const queryAchievedOfYear = () => {
  homeHttp.queryAchievedOfYear().then((res) => {
    if (res.data.data) {
      res.data.data.scaleOfYearDays = parseInt(
        res.data.data.scaleOfYearDays * 100
      );
      res.data.data.scaleOfYear = parseInt(res.data.data.scaleOfYear * 100);
      res.data.data.scaleOfCod = parseInt(res.data.data.scaleOfCod * 100);
      res.data.data.scaleOfAn = parseInt(res.data.data.scaleOfAn * 100);
      dataObj.value = res.data.data;
    }
  });
};
</script>

<style scoped lang="less">
.rateList {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 10rem;
  box-sizing: border-box;

  .rateItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: -10rem;

    .rateDetail {
      margin-top: -4rem;

      p {
        font-size: 14rem;
        color: #7da0ca;
        line-height: 2;
        font-weight: bold;
      }

      .numb {
        color: #6c798b;
        font-weight: bold;
        font-size: 14rem;

        .count {
          font-size: 18rem;
        }
      }
    }
  }
}
</style>
